<template>
  <div class="complaint-page">
    <van-nav-bar :title="title" left-arrow @click-left="$router.go(-1)" />
    <van-form @submit="toUpdate" label-width="4.2em">
      <van-field autocomplete="off"
        v-model="text"
        :label="`${title}内容`"
        name="text"
        type="textarea"
        :placeholder="`${title}内容`"
        maxlength="200"
        rows="5"
        show-word-limit
        :rules="[{required: true, message: `请输入${title}内容`}]"
      >
      </van-field>
      <van-field autocomplete="off" :label="`${title}图片`" name="image">
        <template #input>
          <van-uploader
            v-model="imageList"
            @delete="deleteImage"
            :preview-options="{
              closeable: true,
            }"
            :max-count="9"
            :after-read="afterReadAvatar"
          />
        </template>
      </van-field>
      <van-field autocomplete="off"
        v-model="phone"
        name="phone"
        type="number"
        label="联系方式"
        maxlength="11"
        placeholder="联系方式"
        :rules="[
          {required: true, message: '请输入手机号'},
          {validator: validator, message: '请输入正确手机号'}
        ]"
      />
      <div style="margin: 16px;">
        <van-button color="#1989fa" block round native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import {Toast} from 'vant'
import {cosUploadImg} from '@/utils/cosUpload.js'

export default {
  name: 'complaint',
  data() {
    return {
      text: '',
      imageList: [],
      images: [],
      imageMap: new Map(),
      phone: ''
    }
  },
  computed: {
    title() {
      return this.$route.query.title || '举报'
    },
    company_id() {
      return this.$route.query.company_id
    },
    job_id() {
      return this.$route.query.job_id
    }
  },
  methods: {
    // 校验手机号
    validator(val) {
      return /^1[3456789]\d{9}$/.test(val)
    },
    async _reqUploadPicture(picture) {
      let formData = new FormData()
      formData.append('filename', picture.file)
      const img_type = 'user_avatar'
      // const res = await this.$api.uploadImg.uploadPhotos(formData, img_type)
      const res = await cosUploadImg(picture.file, img_type)
      if (res.code === 200) {
        return res.data
      }
    },
    afterReadAvatar(picture) {
      console.log(picture)
      picture.status = 'uploading';
      picture.message = '上传中...';
      // async/await函数的返回结果仍是promise对象, 使用.then()取得返回值
      this._reqUploadPicture(picture).then(res => {
        console.log(res)

        if (!res) {
          Toast('图片上传失败!')
          picture.status = 'failed';
          picture.message = '上传失败';
        } else {
          picture.status = 'done';
        }

        // this.image = res
        this.images.push(res)
        this.imageMap.set(picture, res)
      })
    },
    deleteImage(picture) {
      const image = this.imageMap.get(picture)
      this.images = this.images.filter(v => v !== image)
      console.log(12345, this.images, image)
    },
    // 确认修改
    toUpdate() {
      const {text, images = [], phone, company_id, job_id} = this
      const params = {text, image: images.join('|'), phone, company_id, job_id}
      const submit = this.title === '举报' ? this.$api.company.sendReportSubmit : this.$api.job.sendSuggestSubmit
      submit(params).then(res => {
        Toast(res.data || this.title + '失败')
        if (res.code == 200) {
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>

<style scoped></style>
